<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>地区列表</title>
	<link rel="stylesheet" href="__ADMIN_PATH__/component/pear/css/pear.css" />
</head>
<body class="pear-container">
	<div class="layui-card">
		<div class="layui-card-body">
			<form class="layui-form" action="">
				<div class="layui-form-item">

					<div class="layui-inline">
						<label class="layui-form-label">名称</label>
						<div class="layui-input-inline">
							<input type="text" name="name" placeholder="" class="layui-input">
						</div>
					</div>

					<div class="layui-inline" style="margin-left: 50px;">
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="search">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>

				</div>
			</form>
		</div>
	</div>

	<div class="layui-card">
		<div class="layui-card-body">
			<table id="tableId" lay-filter="tableFilter"></table>
		</div>
	</div>

	<script src="__ADMIN_PATH__/component/layui/layui.js"></script>
	<script src="__ADMIN_PATH__/component/pear/pear.js"></script>
	<script>
		layui.use(['table', 'form', 'jquery','common', 'popup', 'loading', 'treetable'], function() {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;
			let common = layui.common;
			var popup = layui.popup;
			let loading = layui.loading;
			let treetable = layui.treetable;

			let articleTable = treetable.render({
				elem: '#tableId',
				method: "post",
				url: "{:url('Area/index')}",
				page: false,
				skin: 'line',
				toolbar: "#toolbarTpl",
				treeColIndex: 1,
				treeSpid: 0,
				treeIdName: 'id',
				treePidName: 'pid',
				treeDefaultClose: true,
				cols: [[
					{type: "checkbox"},
					{field: "id", title: "ID", width:200, sort: true, align: 'center'},
					{field: "name", title: "名称"},

					{field: "", title: "启用", templet:"#is_enable"},

					{title: "操作", width:150, align: "center", toolbar: "#operationTpl"}
				]],
				done: function (res, curr, count) {
					console.log(res, curr, count)
				}
			});

			form.on('submit(search)', function(data) {
				var name = data.field.name;
            	treetable.search('#tableId',name);
				return false;
			});

		})
		</script>

		<!--启用状态-->
		<script type="text/html" id="is_enable">
			{{# if(d.is_enable == 1){ }}
			    是
			{{# }else{ }}
			    否
			{{# } }}
		</script>
	</body>
</html>